<template>
    <el-dialog
           title=""
            :visible.sync="visible"
            width="60%"
            center
            :close-on-click-modal="false"
    >
        <div class="FormsDiv">
            <el-form :model="UsersFrom" :rules="ruleUsers" ref="From" label-width="120px" class="demo-ruleForm">
                <el-form-item label="头像" prop="portrait">
                        <PortraitUpload ref="portrait" @attach="portraitUpload" :fileList="fileList"></PortraitUpload>
                </el-form-item>
                <el-form-item label="用户名称" prop="user_name">
                    <el-input v-model="UsersFrom.user_name" placeholder="请输入用户名称"></el-input>
                </el-form-item>
                <el-form-item label="用户登录账号" prop="user_login">
                    <el-input v-model="UsersFrom.user_login" placeholder="请输入用户登录账号"></el-input>
                </el-form-item>

                <el-form-item  label="用户登录密码" prop="password" v-if="userId === -1">
                  <el-input v-model="UsersFrom.password" placeholder="请输入密码"></el-input>
                </el-form-item>

                <el-form-item label="用户邮箱" prop="email">
<!--                    <el-input v-model="UsersFrom.email" placeholder="请输入用户邮箱">-->
<!--                        <template slot="append">@qq.com</template>-->
<!--                    </el-input>-->
                    <el-input v-model="UsersFrom.email" placeholder="请输入用户邮箱">
                    </el-input>
                </el-form-item>
                <el-form-item label="用户手机号" prop="phone">
                    <el-input v-model="UsersFrom.phone" placeholder="请输入用户手机号"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="user_description">
                    <el-input  type="textarea"  v-model="UsersFrom.user_description"  placeholder="请输入描述" maxlength="255" show-word-limit></el-input>
                </el-form-item>

                <el-form-item label="积分" prop="integral">
                    <el-input-number v-model="UsersFrom.integral"  :step="1"  :min="0" :max="999999" ></el-input-number>
                </el-form-item>

                <el-form-item label="用户性别" prop="gender">
                    <el-select v-model="UsersFrom.gender" placeholder="请选择用户性别">
                        <el-option label="" value=""></el-option>
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-radio v-model="UsersFrom.is_delete" :label="0" border>激活</el-radio>
                    <el-radio v-model="UsersFrom.is_delete" :label="1" border>禁用</el-radio>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('UsersFrom')">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
</template>

<script>
    import {getLoginRule,getEmailRule,passRule,phoneRule} from "@/utils/validateFrom";
    import PortraitUpload from "@/components/upload/PortraitUpload";
    import {usersSave} from "@/api/api";
export default {
    props:{
        //弹出窗口
        visibleChild: {
            type:Boolean,
            default:false
        },
      childFrom:{
          type:Object,
          default(){
            return {
              portrait_url:'',
              portrait_text:'',
              portrait:'',
              user_name: '',
              user_login: '',
              password: '',
              gender:'',
              email:'',
              phone:'',
              integral: 0,
              is_delete:0,
            };
          }
        },
        userId:{
          type:Number,
          default() {
            return -1;
          }
        }
    },
    components:{
        PortraitUpload
    },
    data(){
        return {
            UsersFrom:JSON.parse(JSON.stringify(this.childFrom)),
            user_id: this.userId,
            ruleUsers:{
                user_login: [{ validator: getLoginRule,min:2,max:16,required: true,trigger: 'blur',userId:this.user_id}],
                password: [{ validator: passRule,min:4,max:16,required: true,trigger: 'blur'}],
                email: [{ validator: getEmailRule,required: true,trigger: 'blur',userId: this.user_id}],
                phone: [{ validator: phoneRule,required: true,trigger: 'blur'}]
            },
            fileList: []
        }
    },
    watch:{
      // 这样才能算得上动态监控,不然初始渲染的就会一直保留
      childFrom:{
        // 监听数据发生变化的处理函数
        handler(newValue) {
          // 对图片数组的处理
          this.fileList = [];
          this.fileList.push({name:newValue.portrait_text,url:newValue.portrait_url});
          this.UsersFrom = JSON.parse(JSON.stringify(newValue));//将监听到修改的值赋予到dataAttrs中
        },
        // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
        deep: true
      },
      userId:{
        // 监听数据发生变化的处理函数
        handler(newValue) {
          // clearValidate()
          // this.$nextTick(() => {
          //   this.$refs.From.clearValidate();
          // });

          // console.log("this.user_id",newValue)
            this.user_id = newValue;
            this.ruleUsers.user_login["0"].userId = newValue;
            this.ruleUsers.email["0"].userId = newValue;
            // console.log("this.ruleUsers.user_login",this.ruleUsers.user_login["0"]);
        },
        // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
        deep: true
      },
    },
    computed:{
        visible:{
           get(){
                return this.visibleChild;
           },
           set(newValue){
               this.$emit("update:visibleChild",newValue);
           }
        }
    },
    methods: {
        submitForm(){
          this.$refs.From.validate((validate)=>{
            if (validate){
              usersSave(this.UsersFrom).then((res) =>{
                if (res.code === 200){
                  // 重置图片
                  this.$refs.portrait.$refs.PortraitUpload.clearFiles();
                  // 重置初始界面
                  this.UsersFrom = {
                    portrait_url:'',
                    portrait_text:'',
                    portrait:'',
                    user_name: '',
                    user_login: '',
                    password: '',
                    gender:'',
                    email:'',
                    phone:'',
                    integral: 0,
                    is_delete:0,
                  };
                  this.$parent.users([],this.$parent.queryInfo.page,this.$parent.queryInfo.pageSize);
                  this.$message.success('保存成功');
                }
              }).catch(error =>{
                this.$message.error(error.message || 'Error');
              })
            }else {
              this.$message.error('错误');
            }
          })
            //关闭弹窗
            this.visible = false;
        },
        portraitUpload(value){
          console.log("父亲",value);
          this.UsersFrom.portrait = value;
         },
    },

}
</script>

<!--<style scoped>-->
<!--.FormsDiv{-->
<!--    width: 100%;-->
<!--    min-height: 100%;-->
<!--    padding: 15px;-->
<!--    box-sizing: border-box;-->
<!--}-->
<!--</style>-->